<template>
	<div class="header">
		<div class="h-row1 flex-top">
			<div class="h-left"></div>
			<div class="h-content flex-center-between">
				<div class="hc-left">
					<img src="../assets/logo-1.png"
							style="height:45px;">
				</div>
				<div class="hc-right">西渡街道社区卫生服务中心</div>
			</div>
		</div>
		<div class="h-row2 flex-top">
			<div class="hr2-first"></div>
			<div class="hr2-left"></div>
			<div class="hr2-content flex-center-between">
				<div class="ops-time hr2-content-text">{{year}}-{{month}}-{{date}} 周{{day}} {{time}}</div>
				<div class="ops-acc flex-center-center margin-5">
					<div class="ops-icon ops-acc-icon"></div>
					<div class="hr2-content-text">1号接种人</div>
				</div>
				<div class="ops-exit flex-center-center"
						@click="Exit">
					<div class="ops-icon ops-exit-icon"></div>
					<div class="hr2-content-text">退出</div>
				</div>
			</div>
			<div class="hr2-right"></div>
		</div>
	</div>
</template>
<script>
const days = ['日', '一', '二', '三', '四', '五', '六'];
var icnow = new Date();
var interval;
export default {
	name: "HeaderSpan",
	data () {
		return {
			year: icnow.getFullYear(),
			month: icnow.getMonth() + 1,
			date: icnow.getDate(),
			day: days[icnow.getDay() - 1],
			time: icnow.toTimeString().substring(0, 8)
		};
	},
	created () {
		interval = setInterval(() => {
			let icnow = new Date();
			this.year = icnow.getFullYear();
			this.month = icnow.getMonth() + 1;
			this.date = icnow.getDate();
			this.day = days[icnow.getDay()];
			this.time = icnow.toTimeString().substring(0, 8);
		}, 1000);
	},
	beforeUnmount () {
		clearInterval(interval);
	},
	methods: {
		Exit () {
			this.$router.push({ path: '/login' });
		}
	}
}
</script>
<style scoped>
.header {
	height: 80px;
}
.h-row1 {
	height: inherit;
	width: inherit;
}
.h-left {
	background-color: #ffffff;
	width: 25px;
	height: 60px;
	border-bottom-left-radius: 25px;
}
.h-content {
	background-color: #ffffff;
	height: 60px;
	width: 100%;
	float: right;
	color: red;
	padding-left: 0;
	padding-right: 20px;
}
.h-row2 {
	float: right;
	height: 30px;
	margin-top: -5px;
}
.hr2-first {
	height: inherit;
	width: 30px;
	background: radial-gradient(circle at left bottom, transparent 25px, #ffff 0)
		left top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 25px;
	width: 25px;
	margin-top: -15px;
	margin-right: -5px;
}
.hr2-left {
	height: 40px;
	width: 30px;
	margin-top: -20px;
	background-color: #ffffff;
	border-bottom-left-radius: 30px;
}
.hr2-content {
	background-color: #ffffff;
	color: red;
	height: 40px;
	margin-top: -20px;
}
.hr2-content-text {
	opacity: 1;
	font-size: 13px;
	font-weight: 400;
	color: transparent;
	background: linear-gradient(180deg, #00c6fb, #005bea);
	background-clip: text;
	-webkit-background-clip: text;
	margin: 0 5px;
}
.hr2-right {
	height: 40px;
	width: 30px;
	margin-top: -20px;
	background-color: #ffffff;
	border-bottom-right-radius: 25px;
}
.hc-right {
	opacity: 1;
	font-size: 20pt;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 43px;
	color: transparent;
	background: linear-gradient(180deg, #00c6fb, #005bea);
	background-clip: text;
	-webkit-background-clip: text;
}
.ops-icon {
	width: 17px;
	height: 18px;
}
.ops-acc-icon {
	background: url("../assets/user.png") no-repeat;
	background-size: 100% 100%;
}
.ops-exit-icon {
	background: url("../assets/exit.png") no-repeat;
	background-size: 100% 100%;
}
</style>